<template>
  <div class="dingdanye">
  <div class="xiangqingye">

    <!-- 页面名称 -->
    <div class="title">
      <h2>订单详情页</h2>
    </div>

    <div class="main">

      <!-- 地址显示盒子 -->
      <div class="dizhi">
        <p>姓名：{{dingdan.s_address.name}}</p>
        <p>手机：{{dingdan.s_address.phone}}</p>
        <p>地址：{{dingdan.s_address.area_name+dingdan.s_address.desc}}</p>
        <p>订单编号：{{dingdan.order_id}}</p>
        <p>订单时间：{{dingdan.createdAt}}</p>
      </div>

      <div class="title2">
        <p>商品</p>
        <p>数量</p>
        <p>小计(元)</p>
      </div>

      <!-- 商品显示盒子 -->
      <div class="shangpin33" v-for="item in shangping" :key="item.id">
        <div class="img">
          <img :src="item.s_goods_photos[0].path" alt="">
        </div>
        <div class="pinming">
          <p>{{item.goods_name}}</p>
        </div>
        <div class="num">
          <p>{{item.num}}</p>
        </div>
        <div class="xiaoji">
          <p>￥{{item.price*item.num}}.00</p>
        </div>
      </div>

      <div class="dibu">
        <p>合计：￥{{qiuhe}}.00</p>
      </div>
      <div class="liukong"></div>

    </div>

  </div>
</div>
</template>

<script>
//引入时间格式化函数
import dayjs from "dayjs"
//引入获取单条订单信息的函数
import { getoneOrder } from "@/assets/request.js"

export default {
  name: "orderpay",
  data() {
    return {

      //准备一个空数组接收请求回来的对应订单信息
      dingdan: [],

      //准备一个空数组接收商品数组信息，渲染页面使用
      shangping: [],

    }
  },

  //计算属性
  computed:{
    //求和订单总金额
    qiuhe(){
      let nums=0

      this.shangping.forEach((item)=>{

       nums += item.price*item.num

      })
      return nums
    }

  },

  //钩子
  async mounted() {

    // console.log(this.$route.params);

    // //获取单个订单信息
    let res = await getoneOrder(
      this.$route.params.id
    )

    //把请求回来 单条订单信息赋值给data里的参数
    this.dingdan = res.data.result

    //使用dayjs格式化需要格式化的时间
    this.dingdan.createdAt = dayjs(this.dingdan.createdAt).format("YYYY-MM-DD HH:mm:ss")

    console.log(this.dingdan);

    this.shangping = this.dingdan.goods_info
    console.log(this.shangping);


  }
}

</script>

<style lang='scss' scoped>

.dingdanye{
  background-color: gainsboro;

.xiangqingye {
  width: 1400px;
  background-color: gainsboro;
  // height: 400px;
  margin-left: 58px;

  .title {
    display: flex;
    // background-color: pink;
    justify-content: center;
    padding-top: 10px;
  }

  .main {
    position: relative;

    .dizhi {
      // background-color: yellow;
      font-size: 16px;
      padding-top: 10px;

      P {
        padding-bottom: 10px;
        margin-left: 20px;
      }

      margin-bottom: 10px;
    }

    .title2 {
      width: 1300px;
      display: flex;
      justify-content: space-around;
      padding-bottom: 20px;

      // background-color: yellow;
      // margin-left: 150px;
      p {
        width: 150px;
        height: 30px;
        // border: 1px solid black;
        text-align: center;
        line-height: 30px;
        font-size: 16px;

        &:first-child {
          margin-left: 100px;
          width: 300px;
        }

        &:nth-of-type(2) {
          margin-left: -200px;
        }

        &:nth-of-type(3) {
          margin-left: -50px;

        }
      }
    }


    .shangpin33 {
      width: 100%;
      height: 200px;
      // background-color: pink;
      display: flex;
      // background-color: pink;
      justify-content: space-evenly;
      position: relative;


      .img,
      .pinming,
      .num,
      .xiaoji {
        width: 150px;
        height: 150px;
        // border: 1px solid black;

        img {
          width: 100%;
          height: 100%;
        }

        p {
          text-align: center;
          line-height: 150px;
          font-size: 16px;

          display: -webkit-box;
          display: -moz-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          //控制行数
          -webkit-line-clamp: 1;
        }
      }


      .pinming {
        position: absolute;
        left: 390px;
        top: 0;
      }
    }

    .dibu{
      width: 200px;
      margin-left: 1000px;
      text-align: center;

     display: flex;
     justify-content: center;
      font-size: 16px;
      background-color: #424242;
      height: 40px;

      p{
        // background-color: pink;
        // width: 350px;
        color: white;
        line-height: 40px;
      }

    }

    .liukong{
      width: 100%;
      height: 40px;

    }



  }
}
}
</style>
